<template>
	<view class="task">
		<image class="task-title" src="/static/images/task-titles.jpg" mode="widthFix" />

		<view class="task-list">
			<task-item v-for="(item, index) in task" :data="item" :key="index"></task-item>
		</view>

		<view class="task-goods flex flex-row flex-wrap justify-between">
			<goods-item v-for="(item, index) in goodsList" :data="item" :key="index"></goods-item>
		</view>

		<!-- <view class="task-rule">
			<view class="task-rule__text1">规则：</view>
			<view class="task-rule__text2">
				直推积分人数及格可获得平台补贴奖励1000以上。
			</view>
			<view class="task-rule__text2">
				职位直推提成阶梯
			</view>
			<view class="task-rule__text2">
				1. 店长提成10％
			</view>
			<view class="task-rule__text2">
				2. 经理直推提成12%
			</view>
			<view class="task-rule__text2">
				3. 总监直推提成14％
			</view>
			<view class="task-rule__text2">
				4. 总裁直推提成16%
			</view>
			<view class="task-rule__text2">
				5.合伙人直推提成18％
			</view>
		</view> -->

		<!-- 登录提示 -->
		<shopro-auth-modal></shopro-auth-modal>
	</view>
</template>

<script>
	import taskItem from './components/task-item';
	import goodsItem from './components/goods-item';
	export default {
		components: {
			taskItem,
			goodsItem
		},
		data() {
			return {
				task: [],
				goodsList: []
			};
		},

		methods: {
			getTaskList() {
				let that = this;
				that.$http('commission.log')
					.then((res) => {
						uni.stopPullDownRefresh();
						if (res.code === 1) {
							that.task = res.data.data;
						}
					})
					.catch((e) => {
						uni.stopPullDownRefresh();
					});
			},
			getGoodsList() {
				let that = this;
				that.$http('goods.lists', {
						page: 1,
						category_id: 2
					})
					.then((res) => {
						uni.stopPullDownRefresh();
						if (res.code === 1) {
							that.goodsList = res.data.data;
						}
					})
					.catch((e) => {
						uni.stopPullDownRefresh();
					});
			}
		},
		created() {
			this.getGoodsList();
			this.getTaskList();
		},
		onPullDownRefresh() {
			this.getGoodsList();
		}
	};
</script>

<style lang="scss" scoped>
	.task {
		.task-title {
			position: fixed;
			top: 0;
			left: 0;
			z-index: -1;
			width: 100%;
		}

		.task-list {
			box-sizing: border-box;
			position: relative;
			margin-top: 326rpx;
			padding: 0 32rpx;
		}

		.task-goods {
			box-sizing: border-box;
			position: relative;
			padding: 0 32rpx;
		}

		.task-rule {
			margin-top: 200rpx;
			padding: 32rpx;

			&__text1 {
				font-weight: 400;
				font-size: 28rpx;
				color: #000000;
				font-style: normal;
				text-transform: none;
			}

			&__text2 {
				font-weight: 400;
				font-size: 28rpx;
				color: #666666;
				font-style: normal;
				text-transform: none;
			}
		}
	}
</style>
